<template>
  <div class="login-form">
    <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="ruleForm1">
      <el-form-item label="手机号" prop="phone">
        <el-input
          type="text"
          placeholder="请输入手机号"
          :value="ruleForm1.phone"
          @input="e => updateForm({ 'phone': e })"
          auto-complete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="randomCode">
        <el-input
          :value="ruleForm1.randomCode"
          @input="e => updateForm({ 'randomCode': e })"
          placeholder="验证码"
          maxLength="8"
        >
          <template slot="append">
            <el-button @click="sendMsg" type="text" style="width: 100px">
              <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
              <span v-if="!sendMsgDisabled">获取验证码</span>
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="图片验证码" prop="imgCode">
        <el-input
          :value="ruleForm1.imgCode"
          @input="e => updateForm({ 'imgCode': e })"
          placeholder="图片验证码"
          maxLength="8"
        >
          <template slot="append">
            <div>
              <img :src="imgStr" class="img"/>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="submitForm('ruleForm1')">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "part1",
    data() {
      return ({
        rules1: {
          randomCode: [
            { required: true, trigger: 'blur', message: "请输入验证码" }
          ],
          imgCode: [
            { required: true, trigger: 'blur', message: "请输入图片验证码" }
          ],
          phone: [
            { required: true, trigger: 'blur', message: "请输入手机号码"  },
            { pattern: /^[0-9]{11}$/, len: 11, trigger: 'blur', message: "请输入11位手机号码" }
          ]
        },
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false
      })
    },
    computed: {
      ruleForm1: function() {
        return ({
          phone: this.$store.state.signForm.phone,
          randomCode: this.$store.state.signForm.randomCode,
          imgCode: this.$store.state.signForm.imgCode,
        })
      },
      imgStr: function() {
        return this.$store.state.signForm.imgStr
      }
    },
    mounted() {
      this.getImage()
    },
    methods: {
      submitForm(formName) {
        console.log(this.ruleForm1)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateForm({
              step: 2,
            })
            this.$router.push({ path: '/enterpriseSignup/part2' });
            return true;
          } else {
            return false;
          }
        });
      },
      getImage() {
        this.$http.post(this.GLOBAL.host, {
          method: "User_ImgCode",
        }).then(res => {
          this.updateForm({
            uuid: res.data.data.uuid,
            imgStr: `data:image/jpeg;base64,${res.data.data.imgStr}`,
          })
        })
      },
      sendMsg() {
        let me = this;
        if (me.sendMsgDisabled) {
          return
        }
        me.sendMsgDisabled = true;
        let interval = window.setInterval(function() {
          if ((me.time--) <= 0) {
            me.time = 60;
            me.sendMsgDisabled = false;
            window.clearInterval(interval);
          }
        }, 1000);
        this.$http.post(this.GLOBAL.host, {
          method: "User_Code",
          data: {
            phone: this.ruleForm1.phone
          }
        })
      },
      updateForm(data) {
        this.$store.commit('updateSignForm', data)
      }
    }
  }
</script>

<style scoped>
  .img {
    width: 90px;
    height: 38px;
  }

</style>
